<template>
	<view>
		<view class="container" v-if=" userInfo.user_id ">
			<view class="account-panel dis-flex flex-y-center">
				<view class="panel-lable">
					<text>账户余额</text>
				</view>
				<view class="panel-balance flex-box">
					<text>￥{{ userInfo.balance }}</text>
				</view>
			</view>
			<view class="recharge-panel">
				<view class="recharge-label">
					<text>充值金额</text>
				</view>
				<view class="recharge-plan clear">
					<block v-for="(item,index) in planList " :key="index">
						<view class="recharge-plan_item" :class="selectedPlanId == item.plan_id ? 'active' : '' " @tap="onSelectPlan"
						 :data-id=" item.plan_id ">
							<view class="plan_money">
								<text>{{ item.money }}</text>
							</view>
							<view class="plan_gift" v-if=" item.gift_money > 0 ">
								<text>送{{ item.gift_money }}</text>
							</view>
						</view>
					</block>
				</view>

				<!-- 手动充值输入框 -->
				<view class="recharge-input" v-if=" setting.is_custom == '1' ">
					<input type="digit" placeholder="请输入充值金额" :value=" inputValue " @input="bindMoneyInput" />
				</view>

				<!-- 确认按钮 -->
				<view class="recharge-submit btn-submit">
					<form @submit="onSubmit" report-submit="true">
						<button form-type="submit" :disabled=" disabled ">立即充值</button>
					</form>
				</view>


			</view>

			<!-- 充值描述 -->
			<view class="recharge-describe">
				<view class="recharge-label">
					<text>充值说明</text>
				</view>
				<view class="content">
					<text space="ensp">{{ setting.describe }}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// 枚举类：充值类型
	const RechargeTypeEnum = require('../../../utils/enum/recharge/order/RechargeType.js');

	export default {
		data() {
			return {
				userInfo: {}, // 用户信息
				setting: {}, // 充值设置

				// recharge_type: '', // 充值类型
				selectedPlanId: 0, // 当前选中的套餐id
				inputValue: '', // 自定义金额
				planList:{},

				disabled: false, //按钮禁用
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			// 获取充值中心数据
			_this.getRechargeIndex();
		},
		methods: {
			/**
			 * 获取充值中心数据
			 */
			getRechargeIndex() {
				let _this = this;
				_this._get('recharge/index', {}, function(result) {
					console.log(result);
					_this.setData(result.data);
				});
			},

			/**
			 * 选择充值套餐
			 */
			onSelectPlan(e) {
				let _this = this;
				_this.setData({
					selectedPlanId: e.currentTarget.dataset.id,
					inputValue: ''
				});
			},

			/**
			 * 绑定金额输入框
			 */
			bindMoneyInput(e) {
				let _this = this;
				_this.setData({
					inputValue: e.detail.value,
					selectedPlanId: 0
				})
			},

			/**
			 * 立即充值
			 */
			onSubmit(e) {
				let _this = this;

				// 记录formid
				_this.saveFormId(e.detail.formId);

				// 按钮禁用
				_this.setData({
					disabled: true
				});
				// 提交到后端
				_this._post_form('recharge/submit', {
					planId: _this.selectedPlanId,
					customMoney: _this.inputValue,
					// #ifdef APP-PLUS
					posttype: "android",
					// #endif
				}, (result) => {

					// 发起微信支付
					_this.wxPayment({
						payment: result.data.payment,
						success() {
							_this.showSuccess(result.msg.success, () => {
								uni.navigateBack();
							});
						},
						fail(res) {
							_this.showError(result.msg.error);
						},
						complete(res) {

						}
					});

				}, false, () => {
					// 解除禁用
					_this.setData({
						disabled: false
					});
				});
			},

		}
	}
</script>

<style>
	page,
	.container {
		background: #fff;
	}

	.container {
		padding-bottom: 70upx;
	}

	/* 账户面板 */

	.account-panel {
		width: 650upx;
		height: 180upx;
		margin: 50upx auto;
		padding: 0 60upx;
		box-sizing: border-box;
		border-radius: 12upx;
		color: #fff;
		background: linear-gradient(-125deg, #a46bff, #786cff);
		box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
	}

	.panel-lable {
		font-size: 32upx;
	}

	.recharge-label {
		color: rgb(51, 51, 51);
		font-size: 28upx;
		margin-bottom: 25upx;
	}

	.panel-balance {
		text-align: right;
		font-size: 46upx;
	}

	.recharge-panel {
		margin-top: 60upx;
		padding: 0 60upx;
	}

	/* 充值套餐 */

	.recharge-plan .recharge-plan_item {
		width: 192upx;
		padding: 15upx 0;
		float: left;
		text-align: center;
		color: #888;
		border: 1upx solid rgb(228, 228, 228);
		border-radius: 10upx;
		margin: 0 20upx 20upx 0;
	}

	.recharge-plan .recharge-plan_item:nth-child(3n+0) {
		margin-right: 0;
	}

	.recharge-plan .recharge-plan_item.active {
		color: #786cff;
		border: 1upx solid #786cff;
	}

	.recharge-plan .recharge-plan_item.active .plan_money {
		color: #786cff;
	}

	.plan_money {
		font-size: 32upx;
		color: rgb(82, 82, 82);
	}

	.plan_gift {
		font-size: 25upx;
	}

	.recharge-input {
		margin-top: 25upx;
	}

	/* 立即充值 */

	.recharge-input input {
		border: 1upx solid rgb(228, 228, 228);
		border-radius: 10upx;
		padding: 15upx 16upx;
		font-size: 26upx;
	}

	.recharge-submit {
		margin-top: 70upx;
	}

	.btn-submit button {
		font-size: 30upx;
		background: #786cff;
		border: none;
		color: white;
		border-radius: 50upx;
		padding: 0 120upx;
		line-height: 3;
	}

	.btn-submit button[disabled] {
		background: #a098ff;
		border-color: #a098ff;
		color: white;
	}

	/* 充值说明 */

	.recharge-describe {
		margin-top: 50upx;
		padding: 0 60upx;
	}

	.recharge-describe .content {
		font-size: 26upx;
		line-height: 1.6;
		color: #888;
	}
</style>
